import React from 'react'
import Mytab from './Mytab'
import './css/my.css'
import { Modal } from 'antd'
import { connect } from 'react-redux'
import { getConfigController } from './actionCreators'

class My extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
        }
    }
    componentDidMount() {
        this.props.dispatch(getConfigController())
    }
    changeRole = () => {
        this.setState({ visible: true })
    }
    handleCancel = () => {
        this.setState({ visible: false });
    }
    handleUpdate = (record) => {
        this.setState({ visible: false });
    }
    change = (type, e) => {
        this.setState({
            [type]: e.target.value
        })
        localStorage['role']=e.target.value
    }
    parent = () => {
        return (
            <div className='my-body'>
                <div className='lists'>
                    <div className='body-list' onClick={()=>this.props.history.push('/orderlist')}>
                        <div className='body-list-top'></div>
                        <div>我的订单</div>
                    </div>
                    <div className='body-list'>
                        <div className='body-list-top'></div>
                        <div>孩子资料</div>
                    </div>
                    <div className='body-list'>
                        <div className='body-list-top'></div>
                        <div>我的账号</div>
                    </div>
                </div>
                <div className='fast'>快捷设置：</div>
                <div className='put-to-wx'>有新家教订单推送开关：打开</div>
                <div className='put-to-wx'>有新会话消息推送开关：打开</div>
            </div>
        )
    }
    teacher = () => {
        return (
            <div className='my-body'>
                <div className='lists'>
                    <div className='body-list' onClick={()=>this.props.history.push('/orderlist')}>
                        <div className='body-list-top'></div>
                        <div className='list-text'>我的订单</div>
                    </div>
                    <div className='body-list'>
                        <div className='body-list-top'></div>
                        <div className='list-text'>我的简历</div>
                    </div>
                    <div className='body-list'>
                        <div className='body-list-top'></div>
                        <div className='list-text'>推送消息<br />条件设置</div>
                    </div>
                    <div className='body-list'>
                        <div className='body-list-top'></div>
                        <div className='list-text'>我的账号</div>
                    </div>
                </div>
                <div className='fast'>快捷设置：</div>
                <div className='put-to-wx'>有新家教订单推送开关：打开</div>
                <div className='put-to-wx'>有新会话消息推送开关：打开</div>
            </div>
        )
    }
    agent = () => {
        return (
            <div className='my-body'>
                <div className='lists'>
                    <div className='body-list'>
                        <div className='body-list-top'></div>
                        <div>我的订单</div>
                    </div>
                    <div className='body-list'>
                        <div className='body-list-top'></div>
                        <div>我的发布</div>
                    </div>
                    <div className='body-list'>
                        <div className='body-list-top'></div>
                        <div>我的账号</div>
                    </div>
                </div>
                <div className='fast'>快捷设置：</div>
                <div className='put-to-wx'>有新家教订单推送开关：打开</div>
                <div className='put-to-wx'>有新会话消息推送开关：打开</div>
            </div>
        )
    }
    render() {
        return (
            <div>
                <div className='my-all'>
                    <Modal okText='保存' cancelText='取消'
                        visible={this.state.visible}
                        onOk={this.handleUpdate} onCancel={this.handleCancel}
                    >
                        您的身份是：
                        {
                            this.props.role.map((item) => (
                                <div className='role-div'>
                                    <input name="state"
                                        type="radio"
                                        value={item.id}
                                        onChange={(e) => this.change("role", e)}
                                    />
                                    {item.configName}
                                </div>
                            ))
                        }
                    </Modal>
                    <div className='my-top'>
                        <div className='my-center'>我的个人中心：</div>
                        <div className='my-info'>
                            <div className='my-photo'></div>
                            <div className='my-name'>
                                <div className='my-name-n'>用户名昵称</div>
                                <div className='my-name-role'>角色：
                                    {
                                        this.props.role.map((item) => (
                                            item.id == localStorage['role']
                                                ? <span>{item.configName}</span>
                                                : ''
                                        ))
                                    }
                                </div>
                            </div>
                            <div
                                className='changerole'
                                onClick={this.changeRole}
                            >角色切换</div>
                            <div className='my-money'>
                                <div className='my-money-number'>100.00</div>
                                <div className='my-money-wallet'>钱包</div>
                            </div>
                        </div>
                    </div>
                    {
                        <div>
                            {(() => {
                                switch (localStorage['role']) {
                                    case "80": return this.parent();
                                    case "81": return this.teacher();
                                    case "82": return this.agent();
                                    default: return '数据为空';
                                }
                            }
                            )()}
                        </div>


                    }

                    <div className='about-us'>关于我们</div>
                    <div className='contact-ke'>联系客服</div>
                </div>
                <Mytab />
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    role: state.role
})
export default connect(mapStateToProps)(My)
